<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue实例</title>
    <script src="/common/js/jquery-3.2.1.js"></script>
    <script src="/common/js/vue.js"></script>
</head>
<body>
<div id="app">{{msg}}</div>
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>
<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>
<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">点击弹出提示</button>
</div>
<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
   var app=new Vue({
        el: "#app",
        data: {
            msg: "hello world"
        }
    })
   var app2 = new Vue({
       el: '#app-2',
       data: {
           message: '页面加载于 ' + new Date().toLocaleString()
       }
   })
   var app3 = new Vue({
       el: '#app-3',
       data: {
           seen: true
       }
   })
   var app4 = new Vue({
       el: '#app-4',
       data: {
           todos: [
               { text: '学习 JavaScript' },
               { text: '学习 Vue' },
               { text: '整个牛项目' }
           ]
       }
   })
   var app5 = new Vue({
       el: '#app-5',
       data: {
           message: 'Hello Vue.js!'
       },
       methods: {
           reverseMessage: function () {
               alert(this.message);
              // this.message = this.message.split('').reverse().join('')
           }
       }
   })
   var app6 = new Vue({
       el: '#app-6',
       data: {
           message: 'Hello Vue!'
       }
   })
</script>
</body>
</html>